<template>
  <div id="app">
    <header class="fc">
      <h1>SEEC2 PLAYER</h1>
    </header>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">歌手</router-link>
      <router-link to="/about">搜索</router-link>
      <router-link to="/about">我的</router-link>
    </nav>

    <router-view />

    <music-player/>
  </div>
</template>

<script>
import MusicPlayer from '@/components/MusicPlayer.vue';
export default {
  components: {MusicPlayer},
  created() {
    console.log('load!!!!!')
  }
}
</script>

<style lang="sass">
//
#app
  header
    width: 7.5rem
    height: 1.2rem
    h1
      font-size: .32rem
      padding-left: .73rem
      background: left center/.6rem no-repeat url(~@/assets/img/icon-logo.png)

      // height: .6rem
      line-height: .6rem
  nav
    display: flex
    justify-content: space-around
    height: .6rem
    a
      display: block
      line-height: .6rem
      padding-left: .48rem
      background: left center/.4rem no-repeat
      opacity: .6
      color: #fff
      font-size: .28rem
      &.router-link-exact-active
        opacity: 1
      &:nth-child(1)
        background-image: url(./assets/img/icon-home.png)
      &:nth-child(2)
        background-image: url(./assets/img/icon-singer.png)
      &:nth-child(3)
        background-image: url(./assets/img/icon-search.png)
      &:nth-child(4)
        background-image: url(./assets/img/icon-user.png)
</style>

